<template>
    <view>
        <view class="container" :class="{'on': show}">
            <view class="header-container">
                <view style="position: absolute;right: 40rpx;top: 30rpx;">
                    <u-icon color="grey" style="padding: 20rpx" name="close" @click="closeMask"></u-icon>
                </view>
                <text>选择配送时间</text>
            </view>

            <view>
                <u-picker v-model="pickerShow" mode="time"></u-picker>
            </view>

            <view class="bottom-container">
                <view class="cancel-btn btn" @click="closeMask">取消</view>
                <view class="confirm-btn btn" @click="confirm">确认</view>
            </view>

        </view>
        <view class="mask" :hidden="show == false" @click="closeMask"></view>
    </view>
</template>

<script>

export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            selectedItem: 1,
            pickerShow: true
        }
    },
    mounted() {

    },
    methods: {

        confirm() {
            this.$emit('choose',this.selectedItem)
            this.closeMask()
        },

        closeMask(type = '') {
            this.$emit('close')
        }

    }
}
</script>

<style lang="scss" scoped>
    .on {
        transform: translate3d(0, 0, 0) !important;
    }
    .container {
        box-sizing: border-box;
        position: fixed;
        height: 63vh;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: #ffffff;
        z-index: 150;
        border-radius: 25rpx 25rpx 0 0;
        transform: translate3d(0, 100%, 0);
        transition: all .3s cubic-bezier(.25, .5, .5, .9);
        overflow: auto;
        .header-container {
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            margin-bottom: 30rpx;
            position: sticky;
            top: 0;
            z-index: 9999;
            .text {
                font-weight: bold;
            }
        }

        .bottom-container {
            height: 90rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            position: sticky;
            bottom: 0;
            z-index: 9999;
            border-top: 1px solid #f8f8f8;
            .btn {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                color: #ffffff;
            }
            .cancel-btn {
                color: #0abf4c;
            }
            .confirm-btn {
                background-color: #0abf4c;
            }
        }

    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: .5;
        z-index: 5;
        width: 100vw;
        height: 100vh;
    }

</style>
